<script>
import vocabularyDetail from "../../../../../../components/vocabularyDetail.vue"
import UniPopup from "../../../../../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue"
import { cloneDeep, isVip, showModal, showToast, valIsEmpty } from "@/utils"
import title from "../../title.vue"
import collection from "../../collection.vue"
import common from "../../common"
import answerRecord from "../answerRecord.vue"
import analysisVideo from "../../analysisVideo.vue"
import numberUtils from "../../../../../../utils/numberUtils"
import answerSheet from "./answerSheet.vue"
import controlBar from "../controlBar.vue"
export default {
  name: "speedReading",
  components: {
    UniPopup,
    vocabularyDetail,
    title,
    collection,
    answerRecord,
    analysisVideo,
    answerSheet,
    controlBar,
  },
  data() {
    return {
      currentQuestionIndex: 0,
      common,
      isViewAnalysis: false, //是否显示解析（用于控制显示解析按钮状态）
      isVip: false,
      questionList: [],
      textList: [],
    }
  },
  created() {
    isVip().then((res) => (this.isVip = res))
    this.questionList = this.root.details.speedReading.questionList
    this.textList = this.root.details.speedReading.textList
  },
  watch: {
    viewAnalysis() {
      //当前题目索引重置
      this.currentQuestionIndex = 0
    },
  },
  computed: {
    textListRender() {
      if (this.viewAnalysis) {
        //根据段落选项反查题目
        let textList = cloneDeep(this.textList)
        for (let paragraph of textList) {
          for (let question of this.questionList) {
            if (question.questionAnswer === paragraph.mark) {
              paragraph.questionDetail = question
              break
            }
          }
        }
        return textList
      } else {
        return this.textList
      }
    },
  },
  mounted() {
    //自动打开答题卡
    this.$refs.answerSheet.open()
  },
  methods: {
    async submit() {
      //是否还有未做的题目
      let unAnswer = false
      //计算总题数，答对题数，答错题数，未答题数，本次答题得分
      const userDoTopicScore = {
        totalTopicNum: this.questionList.length,
        rightTopicNum: 0,
        errorTopicNum: 0,
        noDoNum: 0,
        score: 0,
        isCalculateScore: 1, //评分
      }
      for (let item of this.questionList) {
        //做对了
        if (item.doRight) {
          userDoTopicScore.rightTopicNum++
          //计算分数
          userDoTopicScore.score = numberUtils.preciseAdd(userDoTopicScore.score, item.questionScore)
        } else {
          //没有做
          if (valIsEmpty(item.userAnswer)) {
            userDoTopicScore.noDoNum++
            //做错了
          } else {
            userDoTopicScore.errorTopicNum++
          }
        }
        if (!item.userAnswer) {
          unAnswer = true
        }
      }
      if (
        unAnswer &&
        !(await showModal({
          title: "提示",
          content: "还有未做的题目，是否确认提交？",
          confirmText: "确认提交",
          cancelText: "继续答题",
        }))
      ) {
        //打开答题卡
        this.$refs.answerRecord.open(this.questionList)
        this.$refs.answerSheet.open()
        return
      }
      //提交答案
      this.$emit("submit", {
        questionList: this.questionList,
        userDoTopicScore,
      })
    },
  },
  props: {
    viewAnalysis: {
      type: Boolean,
      default: false,
    },
    details: {
      type: Object,
      default: () => {},
    },
  },
  emits: ["submit", "handleCorrectQuestion"],
  provide() {
    return {
      parent: this,
    }
  },
  inject: ["root"],
}
</script>

<template>
  <view class="component">
    <title :topic-name="details.topicName"></title>
    <slot></slot>
    <!--		文章段落内容-->
    <view class="text-list">
      <block v-for="paragraph in textListRender" :key="paragraph.id">
        <view class="paragraph-item">
          <!--					段落选项mark-->
          <view class="text mark">{{ paragraph.mark }}.</view>
          <block v-for="item in paragraph.contentList" :key="item.index">
            <!--					文本类型-->
            <text class="text" v-if="item.contentType === 'TEXT'" :user-select="true" @click="$refs.vocabularyDetail.open(item.content)"
              >{{ item.content }}
            </text>
            <!--					重点词汇-->
            <view class="vocabulary" @click="$refs.vocabularyDetail.open(item.content)" v-else-if="item.contentType === 'MAIN_VOCABULARY'"
              >{{ item.content }}
            </view>
          </block>
        </view>
        <template v-if="viewAnalysis">
          <!--				段落翻译-->
          <view class="paragraph-translate block" v-if="paragraph.trans">{{ paragraph.trans }} </view>
          <!--					非会员用户展示查看解析按钮，引导用户去开通会员-->
          <template v-if="paragraph.questionDetail">
            <view class="view-analysis-btn-container" v-if="!isVip && !isViewAnalysis">
              <view class="btn" @click="root.checkIsVip() && (isViewAnalysis = true)">查看解析 </view>
            </view>
            <!--				选项对应的题目解析-->
            <view class="paragraph-question block" v-else>
              <!--					题目序号和名称-->
              <view>
                <text>{{ paragraph.questionDetail.questionSerialNum }}</text>
                <text>.\r\t\r\t</text>
                <text>{{ paragraph.questionDetail.questionName }}</text>
              </view>
              <!--							用户作答-->
              <!--							正确答案-->
              <!--					解析内容-->
              <view v-html="paragraph.questionDetail.analysis" class="analysis"></view>
              <!--							视频解析-->
              <view v-if="paragraph.questionDetail.videoUrl">
                <analysis-video :video-file-url="paragraph.questionDetail.videoUrl"></analysis-video>
              </view>
            </view>
          </template>
        </template>
      </block>
    </view>
    <!--		底部控制按钮-->
    <control-bar @submit="submit" @openAnswerSheet="$refs.answerSheet.open()" :view-analysis="viewAnalysis"></control-bar>
    <!--		答题卡弹框-->
    <view class="popup-placeholder"></view>
    <answerSheet ref="answerSheet" :currentQuestionIndex.sync="currentQuestionIndex"></answerSheet>
    <!--	重点词汇详情-->
    <vocabularyDetail ref="vocabularyDetail"></vocabularyDetail>
    <!--		题目一览-->
    <answerRecord
      ref="answerRecord"
      :view-analysis="viewAnalysis"
      @change="
        (index) => {
          currentQuestionIndex = index
        }
      "
    ></answerRecord>
  </view>
</template>

<style scoped lang="scss">
.component {
  padding: 30rpx;
  > .title {
    font-size: 40rpx;
    font-weight: bold;
  }
  > .text-list {
    padding-bottom: 30rpx;
    .paragraph-item {
      &:not(:first-child) {
        margin-top: 40rpx;
      }
      display: flex;
      flex-wrap: wrap;
      font-size: calc(34rpx * var(--font-size-rate));
      line-height: 2;
      .topic {
        text-decoration: underline;
        &.practice {
          background: var(--theme-color);
        }
        &.correct {
          background: #88debc;
        }
        &.incorrect {
          background: #ff9c9c;
        }
      }
      .vocabulary {
        color: var(--text-color-theme);
        text-decoration: underline;
      }
      .text {
        display: inline-block;
        //识别文本中的空格
        white-space: pre-wrap;
      }
      .mark {
        color: var(--text-color-theme);
        font-weight: bold;
        margin-right: 20rpx;
      }
    }
    > .block {
      font-size: calc(32rpx * var(--font-size-rate));
      padding: 0 20rpx;
      border-radius: 16rpx;
      line-height: 2;
    }
    .paragraph-translate {
      margin-top: 10rpx;
      //color: var(--text-color-light);
      border: 3rpx solid var(--border-color);
			background: var(--theme-color-light);
    }
    .view-analysis-btn-container {
      margin-top: 20rpx;
      display: flex;
      justify-content: flex-end;
      .btn {
        background: var(--theme-color);
        font-size: 30rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        padding: 0 30rpx;
        border-radius: 40rpx;
      }
    }
    .paragraph-question {
      margin-top: 20rpx;
      border: 3rpx solid var(--text-color-theme);
      > .analysis {
        color: var(--text-color-light);
      }
    }
  }
  .popup-placeholder {
    height: 60vh;
  }
}
</style>
